<template>
	<div class="banner">
		<el-menu
			background-color="#333" 
			text-color="#fff" 
			active-text-color="#ffd04b" 
			:router="true" 
			:unique-opened="true">
			<el-submenu :index="index.toString()" v-for="(item,index) in banner" :key="index">
				<template slot="title">
					<i></i>
		        	<span class="banner__title">{{item.title}}</span>
		        </template>
				<el-menu-item :index="item2.path" v-for="(item2,index2) in item.children" :key="index">
					{{item2.title}}
				</el-menu-item>
			</el-submenu>
		</el-menu>
	</div>
</template>
<script>
	import banner from "../../../../static/json/test_banner.json"
	export default {
		created() {
			 
		},
		data() {
			return {
				banner
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	.banner {
		width: 13%;
		overflow: hidden;
		background: #333;
	}
	.banner__title {
		font-size: 13px;
	}
	.el-menu {
		border-right: 0;
	}
</style>